<template>
<div>
  <div class="vm-banner-container">
    <mt-swipe :auto="4000">
      <mt-swipe-item><img src="static/images/addSupplyChain-banner.png"></mt-swipe-item>
    </mt-swipe>
  </div>
  <h5 class="supplyChainTitle">注册及加入供应链</h5>
  <div class="vm-supplyChain-one">
    <div class="one-header">
      <span>1</span>
      <h6>获取邀请码</h6>
    </div>
    <div class="one-from-content">
      <div class="one-from-item">
        <div class="left-icon">
          <img class="add-supply-user" src="static/images/add-supply-company/add-supply-user.png" alt="">
        </div>
        <div class="right-content">
          <input type="text" placeholder="用户名 (字母数字组合)" v-model="addSuppliers.userName">
        </div>
      </div>
      <div class="one-from-item">
        <div class="left-icon">
          <img class="phone" src="static/images/add-supply-company/add-supply-mobile-phone.png" alt="">
        </div>
        <div class="right-content">
          <input type="text" placeholder="请输入手机号" v-model="addSuppliers.userPhone">
        </div>
      </div>
      <div class="one-from-item">
        <div class="left-icon">
          <img class="add-supply-info" src="static/images/add-supply-company/add-supply-info.png" alt="">
        </div>
        <div class="right-content">
          <input type="text" placeholder="请输入验证码" v-model="addSuppliers.verificationCode">
          <span class="yzm" @click="getVerificationCode">获取验证码</span>
        </div>
      </div>
      <div class="one-from-item">
        <div class="left-icon">
          <img class="add-supply-name" src="static/images/add-supply-company/add-supply-name.png" alt="">
        </div>
        <div class="right-content">
          <input type="text" placeholder="请输入真实姓名" v-model="addSuppliers.name">
        </div>
      </div>
      <div class="one-from-item">
        <div class="left-icon">
          <img class="add-supply-password" src="static/images/add-supply-company/add-supply-password.png" alt="">
        </div>
        <div class="right-content">
          <input type="password" placeholder="密码6-15位字母数字组合" v-model="addSuppliers.password">
        </div>
      </div>
      <div class="one-from-item">
        <div class="left-icon">
          <img class="add-supply-company" src="static/images/add-supply-company/add-supply-company.png" alt="">
        </div>
        <div class="right-content">
          <input type="text" placeholder="请输入公司名称"  v-model="addSuppliers.companyName">
        </div>
      </div>
      <div class="one-from-item">
        <div class="left-icon">
          <img class="add-supply-user" src="static/images/add-supply-company/add-supply-user.png" alt="">
        </div>
        <div class="right-content">
          <input type="text" placeholder="请输入邀请码" v-model="addSuppliers.invitationCode">
          <span class="questionMark" @click="getInvitationCode">获取邀请码</span>
          <i class="wenhao" @click="wenhao"></i>
        </div>
      </div>
      <div class="one-from-item">
        <div class="left-icon">
          <img class="add-supply-diyu" src="static/images/add-supply-company/add-supply-diyu.png" alt="">
        </div>
        <div class="right-content">
          <select
            name="province"
            id="sheng"
            ref="nodeSelect"
            v-model="addSuppliers.sheng"
            @change="getCity('nodeSelect')">
            <option value="">请选择</option>
            <option value="11">北京市</option>
            <option value="12">天津市</option>
            <option value="13">河北省</option>
            <option value="14">山西省</option>
            <option value="15">内蒙古自治区</option>
            <option value="21">辽宁省</option>
            <option value="22">吉林省</option>
            <option value="23">黑龙江省</option>
            <option value="31">上海市</option>
            <option value="32">江苏省</option>
            <option value="33">浙江省</option>
            <option value="34">安徽省</option>
            <option value="35">福建省</option>
            <option value="36">江西省</option>
            <option value="37">山东省</option>
            <option value="41">河南省</option>
            <option value="42">湖北省</option>
            <option value="43">湖南省</option>
            <option value="44">广东省</option>
            <option value="45">广西壮族自治区</option>
            <option value="46">海南省</option>
            <option value="50">重庆市</option>
            <option value="51">四川省</option>
            <option value="52">贵州省</option>
            <option value="53">云南省</option>
            <option value="54">西藏自治区</option>
            <option value="61">陕西省</option>
            <option value="62">甘肃省</option>
            <option value="63">青海省</option>
            <option value="64">宁夏回族自治区</option>
            <option value="65">新疆维吾尔自治区</option>
            <option value="71">台湾省</option>
            <option value="81">香港特别行政区</option>
            <option value="82">澳门特别行政区</option>
          </select>
          <select
            name="city"
            id="shi"
            ref="nodeCounty"
            v-model="addSuppliers.shi"
            @change="getCounty('nodeCounty')">
            <option value="请选择">请选择</option>
          </select>
          <select
            name="country"
            id="qu"
            v-model="addSuppliers.qu">
            <option value="请选择">请选择</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="vm-supplyChain-two">
    <div class="two-header">
      <span>2</span>
      <h6>选择分类</h6>
    </div>
    <div class="two-content-title">
       <h5>物资或服务分类:(请选择贵公司的物资细分类)</h5>
        <p>智能供需匹配的基础分类数据</p>
    </div>
    <div class="two-addSuppliers-warp">
      <div class="addSuppliers-item" v-for="(item, key) in add_supplyData" :key="key">
        <span>
          <input
            type="checkbox"
            :data-id="item.id"
            :data-name="item.name"
            ref="checkbox">
          {{ item.name }}
        </span>
        <img @click="delSuppliersItem(key)" src="static/images/add-supply-company/add-supply-clearItem.png" alt="">
      </div>
    </div>
    <!-- start -->
    <group class="vm-cellbox">
      <!-- 一级 -->
      <cell-box
        class="vm-cellbox-c"
        v-for="(item, key) in c_data"
        :key="key">
        <div class="oneLevel">
          <div class="c">
            <i
              @click.stop="childItemC(item,key,1)"
              :class="['vm-find_suppliers-icon',{'add': !item.childrenData || item.block != true}, {'c-reduce': item.childrenData && item.childrenData.data.length && item.block == true}]"></i>
            <span>{{item.name}}</span>
          </div>
        </div>
        <!-- 二级 -->
        <cell-box
          v-if="c_data[key].block"
          v-for="(item, index) in c_data[key].childrenData && c_data[key].childrenData.data"
          :key="index"
        >
          <div class="twoLevel">
            <div class="c">
              <i
                :class="['vm-find_suppliers-icon',{'c-add': !item.childrenData || item.block != true}, {'c-reduce': item.childrenData && item.childrenData.length && item.block == true}]"
                @click.stop="childItemC(item,index,2)"></i>
              <span>{{item.name}}</span>
            </div>
          </div>
          <!-- 三级 -->
          <cell-box
            v-if="item.block" @click.native.stop>
            <div class="threeLevel"
                 v-for="(item, index) in item.childrenData"
                 :key="index">
              <div class="c" style="width: 100%;">
                <span
                  @click="addSuppliersData(item)"
                   style="width: 100%;display: block;">{{item.name}}</span>
              </div>
            </div>
          </cell-box>
        </cell-box>
      </cell-box>
    </group>
    <!-- end -->

    <div class="vm-addSupplyPhone-warp">
      <h5>注册有问题及请来电咨询</h5>
      <p>4006267766 18911771800</p>
    </div>
  </div>
  <mt-button class="vm-submit-btn" type="danger" @click="submit">提交</mt-button>
</div>
</template>

<script>
    import {Group, CellBox} from 'vux'
    import { Supplychain_supplyChain, supplychain_getIneList, supplychain_getKeywords } from '@/api/find_suppliers.js'
    import { searchcity, getSMSCodeR_p, registercheck_p, getConnectPhonecode, sendCodeToConnectPhone, register_p } from '@/api/addSupplyChain.js'
    import { MessageBox } from 'mint-ui';
import { setTimeout } from 'timers';
    export default {
        name: "addSupplyChain",
        data () {
            return {
              addSuppliers: {
                userName: '', // 用户名
                userPhone: '', // 手机号
                verificationCode:'', // 验证码
                name:'', // 真实姓名
                password: '', // 密码
                companyName: '', // 公司名称
                invitationCode: '', // 邀请码
                sheng: '', // 省
                shi:'', // 市
                qu: '', // 区
                invclass_id: '',// 物料id
                invclass_name: ''// 物资名称
              },
              VerificationCode: '', // 后端返回验证码
              c_data: new Array(), // 材料及设备类供应商
              add_supplyData: new Array()
            }
        },
        created () {
          this.getOneLevelList();
        },
        methods: {
          // 获取全部一级分类
          getOneLevelList () {
            Supplychain_supplyChain()
              .then(res => res.data)
              .then(data => {
                this.c_data = data.data.c_data;
              })
          },
          // 点击该项，弹出该项下的所有子项
          childItemC (data,key,level) {
            if (level == 1) {
              // 点击加载二级数据逻辑
              this.$set(this.c_data[key], 'block', !this.c_data[key].block);
              this.c_data[key].ilevel = 2;
            } else if (level == 2) {
              // 点击加载三级数据逻辑
              this.$set(data, 'block', !data.block);
              this.c_data[key].ilevel = 3;
            }
            this.getIneItemList(data, key, level);
          },
          // 获取分类查询下级分类数据
          getIneItemList (_data, key, level) {
            let obj = {};
            obj.inv_id = _data.id;
            obj.ilevel = this.c_data[key].ilevel;
            supplychain_getIneList(obj)
              .then(res => res.data)
              .then(data => {
                if (level == 1) {
                  this.$set(_data, 'childrenData', {});
                  this.$set(_data.childrenData, 'data', data.data);
                } else if (level == 2) {
                  this.$set(_data, 'childrenData', data.data);
                }
              })
          },
          // 选择该项添加物料数据
          addSuppliersData(item) {
            let _item = item;
            let b = this.add_supplyData.some(item => {
              return item.id == _item.id;
            })
            if (!b) {
              this.add_supplyData.push(item);
            } else {
              this.$toast('您已添加此分类数据,不能重复添加!');
            }
          },
          // 删除已添加的物料数据
          delSuppliersItem (key) {
            this.add_supplyData.splice(key,1);
          },
          // 获取城市
          getCity (r) {
            let Id = this.$refs[r].value;
            var shi = document.getElementById('shi').innerHTML = '';
            var qu = document.getElementById('qu').innerHTML = '';
            searchcity({Id})
              .then(res => res.data)
              .then(data => {
                var obj = document.getElementById('shi');
                obj.options.add(new Option("请选择", "请选择"));
                for(var i = 0; i < data.data.length; i++) {
                  obj.options.add(new Option(data.data[i]['name'],
                    data.data[i]['Id']));
                }
              })
          },
          // 获取地区
          getCounty (r) {
            let Id = this.$refs[r].value;
            var qu = document.getElementById('qu').innerHTML = '';
            searchcity({Id})
              .then(res => res.data)
              .then(data => {
                var obj = document.getElementById('qu');
                obj.options.add(new Option("请选择", "请选择"));
                for(var i = 0; i < data.data.length; i++) {
                  obj.options.add(new Option(data.data[i]['name'],
                    data.data[i]['Id']));
                }
              })
          },
          // 获取验证码
          getVerificationCode () {
            if (!this.addSuppliers.userName) {
              this.$toast("请输入用户名(字母数字组合)");
              return;
            }
            if (!this.addSuppliers.userPhone ) {
              this.$toast("请输入手机号码");
              return;
            }
            let item = {};
            item.code = this.addSuppliers.verificationCode;
            let tel = this.addSuppliers.userPhone;
            let username = this.addSuppliers.userName;
            getSMSCodeR_p({username, tel})
              .then(res => res.data)
              .then(data => {
                if (data.status == 200) {
                  this.$toast(data.message);
                  this.VerificationCode = data.data;
                } else if (data.status == 500){
                  this.$toast(data.data);
                }
              })
          },
          // 获取邀请码
          getInvitationCode() {
            if ( !this.addSuppliers.companyName ) {
              this.$toast('请输入公司名称！');
              return;
            }
            let comname = this.addSuppliers.companyName;
            sendCodeToConnectPhone({comname})
              .then(res => res.data)
              .then(data => {
                if (data.data == false) {
                  MessageBox.alert('不需要邀请码可以注册');
                } else {
                  MessageBox.alert(data.data);
                }
              });
          },
          // 查看是否需要邀请码
          wenhao () {
            if ( !this.addSuppliers.companyName ) {
              this.$toast('请输入公司名称！');
              return;
            }
            let comname = this.addSuppliers.companyName;
            getConnectPhonecode({comname})
              .then(res => res.data)
              .then(data => {
                if (!data.data) {
                  MessageBox.alert('请直接注册');
                } else {
                  MessageBox.alert(`第一联系人的手机号为:${data.data}`);
                };
              })
          },
          submit () {
            if (!this.addSuppliers.userName) {
              this.$toast("请输入用户名(字母数字组合)");
              return;
            }
            if (!this.addSuppliers.userPhone ) {
              this.$toast("请输入手机号码");
              return;
            }
            if ( !this.addSuppliers.verificationCode ) {
              this.$toast('请输入验证码！');
              return;
            }
            if ( !this.addSuppliers.name ) {
              this.$toast('请输入真实姓名！');
              return;
            }
            if ( !this.addSuppliers.password ) {
              this.$toast('密码6-15位字母数字组合！');
              return;
            }
            if ( !this.addSuppliers.companyName ) {
              this.$toast('请输入公司名称！');
              return;
            }
            let code = this.addSuppliers.verificationCode;
            registercheck_p({code})
              .then(res => res.data)
              .then(data => {
                if (data.status == 500) {
                  this.$toast('您输入的验证码不正确！');
                } else if (data.status == 200){
                    let strName = '';
                    let strId = '';
                    for (var i = 0; i < this.$refs.checkbox.length; i ++) {
                      if (this.$refs.checkbox[i].checked) {
                        strName += this.$refs.checkbox[i].getAttribute('data-name') + ',';
                        strId += this.$refs.checkbox[i].getAttribute('data-id') + ',';
                      }
                    }
                    if (strName.endsWith(',')) {
                      strName = strName.substring(0,strName.length-1);
                    }
                    if (strId.endsWith(',')) {
                      strId = strId.substring(0,strId.length-1);
                    }
                    this.addSuppliers.invclass_name = strName;
                    this.addSuppliers.invclass_id = strId;
                    let obj = new Object();
                    obj.province = this.addSuppliers.sheng;// 省id
                    obj.city = this.addSuppliers.shi;// 市id
                    obj.country = this.addSuppliers.qu; // 区 id
                    obj.phone = this.addSuppliers.userPhone; // 手机号
                    obj.username = this.addSuppliers.userName; //用户名
                    obj.name = this.addSuppliers.name; //真实姓名
                    obj.pwd = this.addSuppliers.password; // 密码
                    obj.cpname = this.addSuppliers.companyName; // 公司名称
                    obj.yqcode = ''; // 邀请码
                    obj.invclass_id = this.addSuppliers.invclass_id; // 物资id
                    obj.invclass_name = this.addSuppliers.invclass_name; // 物资名称
                    register_p(JSON.stringify(obj))
                      .then(res => res.data)
                      .then(data => {
                        if (data.status == 200) {
                          MessageBox.alert(data.data);
                          setTimeout(() =>{
                            this.$router.push({
                              path: '/'
                            })
                          },2000);
                        } else {
                          MessageBox.alert(data.data);
                          setTimeout(() =>{
                            this.$router.push({
                              path: '/'
                            })
                          },2000);
                        }
                      });
                };
              })
          }
        },
        components: {
          Group,
          CellBox
        }
    }
</script>

<style scoped>
  #app {
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding: 0;
    background-color: #ffffff;
  }
  h5.supplyChainTitle {
    height: 80px;
    line-height: 80px;
    font-size: 36px;
    color: #010101;
    background-color: #fafafa;
    margin-top: 15px;
    margin-bottom: 35px;
  }
  .vm-supplyChain-one {
    padding-left: 20px;
    background-color: #ffffff;
  }
  .vm-supplyChain-one .one-header{
    height: 65px;
    display: flex;
    align-items: flex-start;
    border-bottom: 2px solid #F34B50; /* no */
  }
  .vm-supplyChain-one .one-header > span {
    margin-right: 20px;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: #F34B50;
  }
  .vm-supplyChain-one .one-header > h6 {
    font-size: 36px;
    color: #0F0F0F;
  }
  .one-from-content {
    padding-left: 30px;
    padding-right: 55px;
  }
  .one-from-content .one-from-item {
    height: 105px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d8d8d8; /* no */
  }
  .one-from-content .one-from-item input {
    padding: 0 !important;
    width: 90% !important;
    height: auto !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 28px !important;
    color: #808080 !important;
    line-height: 30px !important;
  }
  .one-from-content .one-from-item .right-content {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
  .one-from-content .one-from-item .right-content span {
    display: flex;
    align-items: center;
    position: absolute;
    right: 60px;
    font-size: 28px;
    color: #3D86FF;
    line-height: 30px;
  }
  .one-from-content .one-from-item .right-content select {
    font-size: 26px;
  }
  .one-from-content .one-from-item .right-content i.wenhao {
    position: absolute;
    right: 0;
    content: '';
    display: inline-block;
    background: url("../../../static/images/add-supply-company/add-supply-question-circle.png");
    background-size: 36px 36px;
    width: 36px;
    height: 36px;
    margin-left: 24px;
  }
  .one-from-content .one-from-item .right-content> select {
    width: 180px;
    margin: 0;
    padding-left: 20px;
    border-right: 1px solid #d8d8d8 !important; /* no */
  }
  .one-from-content .one-from-item .right-content span.questionMark {
    right: 50px;
  }
  /*.one-from-content .one-from-item .right-content span.questionMark::after {*/
    /*content: '';*/
    /*display: inline-block;*/
    /*background:url("../../../static/images/add-supply-company/add-supply-question-circle.png");*/
    /*background-size: 36px 36px;*/
    /*width: 36px;*/
    /*height: 36px;*/
    /*margin-left: 24px;*/
  /*}*/
  .one-from-content .one-from-item .left-icon {
    width: 68px;
    height: 45px;
    border-right: 1px solid #d8d8d8; /* no */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .one-from-content .one-from-item .left-icon img.add-supply-user {
    width: 41px;
    height: 40px;
  }
  .one-from-content .one-from-item .left-icon img.phone {
    width: 28px;
    height: 40px;
  }
  .one-from-content .one-from-item .left-icon img.add-supply-info {
    width: 40px;
    height: 30px;
  }
  .one-from-content .one-from-item .left-icon img.add-supply-name {
    width: 40px;
    height: 37px;
  }
  .one-from-content .one-from-item .left-icon img.add-supply-password {
    width: 38px;
    height: 40px;
  }
  .one-from-content .one-from-item .left-icon img.add-supply-company {
    width: 40px;
    height: 40px;
  }
  .one-from-content .one-from-item .left-icon img.add-supply-diyu {
    width: 40px;
    height: 40px;
  }


  .vm-supplyChain-two {
    margin-left: 20px;
    background-color: #ffffff;
    margin-top: 50px;
  }
  .vm-supplyChain-two .two-header{
    height: 65px;
    display: flex;
    border-bottom: 2px solid #F34B50;; /* no */
  }
  .vm-supplyChain-two .two-header span {
    margin-right: 20px;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: #F34B50;
  }
  .vm-supplyChain-two h6 {
    font-size: 36px;
    color: #0F0F0F;
  }
  .vm-supplyChain-two .two-content-title {
    display: flex;
    flex-direction: column;
  }
  .vm-supplyChain-two .two-content-title > h5{
    font-size: 32px;
    color: #333333;
    line-height: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-bottom: 20px;
  }
  .vm-supplyChain-two .two-content-title > p{
    font-size: 26px;
    color: #555555;
    line-height: 26px;
    margin-bottom: 40px;
  }

  .vm-addSupplyPhone-warp {
    height: 180px;
    text-align: left;
  }
  .two-addSuppliers-warp {
    margin-bottom: 25px;
  }
  .addSuppliers-item {
    height: 45px;
  }
  .addSuppliers-item > span {
    padding-left: 0.466667rem;
    width: 90%;
    display: inline-block;
    text-align: left;
    font-size: 28px;
    color: #666666;
  }
  .addSuppliers-item> span input {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-right: 50px;
  }
  .addSuppliers-item> img {
    height: 26px;
    vertical-align: middle;
  }

  .vm-addSupplyPhone-warp > h5 {
    font-size: 36px;
    color: #010101;
    line-height: 32px;
    margin-top: 30px;
    display: flex;
    align-items: center;
  }
  .vm-addSupplyPhone-warp > h5::before {
    content: '';
    display: inline-flex;
    background:url("../../../static/images/add-supply-company/add-supply-phone.png");
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
    margin-right: 25px;
  }
  .vm-addSupplyPhone-warp > p {
    margin-top: 35px;
    font-size: 36px;
    color: #009DFF;
    line-height: 32px;
    margin-left: 45px;
  }
  .vm-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background-color: #f34c4f;
    height: 92px;
  }


  /* start */
  .vm-cellbox {
    overflow: scroll;
    padding-bottom: 50px;
    border-bottom: 2px solid #f34c4f; /* no */
  }
  .vm-cellbox-c {
    padding-left: 35px !important;
    padding-right: 20px !important;
  }
  .vm-cellbox >>> .weui-cell {
    flex-direction: column;
    width: 100%;
    padding: 0;
  }
  .vm-cellbox .oneLevel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-right: 0 !important;
  }
  .vm-cellbox >>> .weui-cell .oneLevel,
  .vm-cellbox >>> .weui-cell .twoLevel,
  .vm-cellbox >>> .weui-cell .threeLevel{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 20px 20px 35px;
    position: relative;
  }
  .vm-cellbox >>> .weui-cell .twoLevel{
    flex-direction: row;
    padding: 0.266667rem 0 0.266667rem 0;
    margin: 0;
  }
  .vm-cellbox >>> .weui-cell .twoLevel:first-child::before {
    display: none;
  }
  .vm-cellbox >>> .weui-cell .twoLevel .weui-cell {
    margin: 20px 20px 20px 35px;
  }
  .vm-cellbox >>> .weui-cell .threeLevel {
    flex-direction: row;
    padding-left: 55px;
  }
  .vm-cellbox >>> .weui-cell .threeLevel .weui-cell {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    padding: 0;
  }
  .vm-cellbox >>> .weui-cell .threeLevel span {
    font-size: 28px;
    color: #666666;
    text-align: left;
  }
  .vm-cellbox >>> .weui-cell .twoLevel::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 0.013333rem;
    border-top: 0.013333rem solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 0.2rem;
  }


  .vm-cellbox .twoLevel {
    flex-direction: column;
    padding-buttom: 0 !important;
    margin: 0;
  }
  .vm-cellbox .twoLevel >>> .weui-cell {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  .vm-cellbox >>> .weui-cells {
    margin-top: 0;
  }
  .vm-cellbox .oneLevel .c,
  .vm-cellbox .twoLevel .c{
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
  }


  .vm-cellbox .oneLevel  .c > span,
  .vm-cellbox .twoLevel  .c > span {
    color: #666666;
    display: inline-block;
    padding-left: 58px;
    font-size: 28px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
  .vm-cellbox .oneLevel .c > .vm-find_suppliers-icon,
  .vm-cellbox .twoLevel .c > .vm-find_suppliers-icon{
    margin-right: 20px;
    position: absolute;
  }
  .vm-cellbox .oneLevel .c > i.add,
  .vm-cellbox .twoLevel .c > i.add{
    width: 38px;
    height: 38px;
    background-position: -30px -64px;
  }
  .vm-cellbox .c > i.c-add {
    width: 38px;
    height: 38px;
    background-position: -101px -64px;
  }
  .vm-cellbox .c > i.c-reduce {
    width: 38px;
    height: 38px;
    background-position: -185px -64px;
  }
  .vm-cellbox .r{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    width: 228px;
    border: 1px solid #f44b50; /* no */
    border-radius: 20px; /* no */
    font-size: 24px;
    color: #f44b50;
  }
  /* end */
</style>

<style lang="scss">
.vm-banner-container {
  height: 360px;
  img {
    width: 100%;
    height: 100%;
  }
  .swiper-pagination {
    position: static !important;
    width: 100% !important;
    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      margin: 0 13px;
    }
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
      width: 36px;
      height: 12px;
      background: #d9261d;
      border-radius: 25%;
    }
  }
}
</style>
